<template>
  <div>
    <div class="ret">
      <van-nav-bar title="选择城市" left-text="返回" left-arrow @click-left="toHomeAndCompany"/>
    </div>
    <div>
      <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
        />
      </van-popup>
    </div>
    <div>
      <van-cell-group>
        <van-field v-model="city.cityName" placeholder="请输入地址"/>
        <van-button type="primary" size="large" @click="findByCityList()">搜索</van-button>
      </van-cell-group>
    </div>
    <div class="list">
      <van-list>
        <div>
          <van-cell v-for="city in cities" :key="city.id">
            <div>{{ city.cityName }}</div>
          </van-cell>
        </div>
      </van-list>
    </div>
    <div class="zi">
      <ul>
        <li v-for="(citiesByLetter, letter) in citiesGroupedByLetter" :key="letter" class="li">
          {{ letter }}
          <ul>
            <li v-for="city in citiesByLetter" :key="city">{{ city }}</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { useCascaderAreaData } from "@vant/area-data";

export default {
  data() {
    return {
      searchKeyword: '',
      cities: [], // 城市列表
      city: {
        cityList: [],
        cityName: '',
      },
      letter: '', // A-Z
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: useCascaderAreaData(),
      keyword: '',
    };
  },
  mounted() {
  },
  created() {
    this.findByCityList();
  },
  computed: {
    citiesGroupedByLetter() {
      const alphabet = '★ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      const groupedCities = {};
      for (const letter of alphabet) {
        groupedCities[letter] = [];
      }
      // for (const city2 of this.cities) {
      //   const firstLetter = city2.charAt(0).toUpperCase();
      //   if (alphabet.includes(firstLetter)) {
      //     groupedCities[firstLetter].push(city2);
      //   } else {
      //     groupedCities['#'].push(city2);
      //   }
      // }
      for (const letter in groupedCities) {
        groupedCities[letter].sort();
      }
      return groupedCities;
    },
  },
  methods: {
    findByCityList() {
      axios.post('http://localhost:8081/passenger/city/findByCityList', this.city)
        .then(res => {
          console.log("城市列表：", res.data);
          this.cities = res.data.data;
        });
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map(option => option.text).join('/');
      console.log(this.fieldValue);
    },
    toHomeAndCompany(){
      this.$router.push({
        path: '/homeAndCompany',
      })
    },
  },
};
</script>

<style scoped>
.ret {
  margin-top: 0px;
}

.zi {
  float: left;
  margin-left: 350px;
  margin-top: -676px;
  background-color: white;
  height: 1000vh;
  width: 10%;

}
.li{
  margin-left: 10px;
  margin-top: 5px;
}

.list {
  width: 90%;
  height: 80vh;
  margin-top: 0px;
  float: left;
}

.alphabetical-list {
  float: left;
  margin-top: 10px;
  margin-left: 50px;
}
</style>
